<!-- 地图 init 方法测试，loader 缓存测试 -->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map Demo</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      #map-container {
        width: 400px;
        height: 300px;
        border: 1px solid #ccc;
      }

      .map-wrapper {
        display: flex;
        flex-wrap: wrap;
      }

      .map-item {
        width: 45%;
        height: 400px;
        margin: 10px;
        border: 1px solid #ccc;
      }

      #huawei-map {
        width: 100%;
        height: calc(100% - 24px);
      }

      #google-map {
        width: 100%;
        height: calc(100% - 24px);
      }

      #amap-map {
        width: 100%;
        height: calc(100% - 24px);
      }

      .map-item-title {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div class="map-wrapper">
      <div class="map-item">
        <div class="map-item-title">华为地图</div>
        <div id="huawei-map"></div>
      </div>
      <div class="map-item">
        <div class="map-item-title">谷歌地图</div>
        <div id="google-map"></div>
      </div>
      <div class="map-item">
        <div class="map-item-title">高德地图</div>
        <div id="amap-map"></div>
      </div>
    </div>

    <script type="module">
      import { createMap, init } from "../src/index";

      (async () => {
        try {
          const YOUR_HUAWEI_MAP_API_KEY =
            "DgEDAF4hteXC0Zy9zEgKIGXiALRk5J81YmepSE98ByZVMQU+AL+NbgIbgXhcbbXHCTkFmmqbHRuSWUx6qRi3xcXozPZE0NJlpkeobg==";
          const YOUR_AMAP_API_KEY =
            "6f7f9957bd5b32dd518eb03f5910f42c";
          const YOUR_GOOGLE_MAP_API_KEY =
            "AIzaSyAR1VWmtaFPFaool39iVbPueS7DVRAn39k";

          const initCommonMapOption = {
            center: { lat: 28.169809, lng: 112.929122 },
            zoom: 12,
          };
          const huaweiMap = await init({
            container: document.getElementById("huawei-map"),
            mapProvider: "huawei",
            apiKey: YOUR_HUAWEI_MAP_API_KEY,
            ...initCommonMapOption,
          });
          const amapMap = await init({
            container: document.getElementById("amap-map"),
            mapProvider: "amap",
            apiKey: YOUR_AMAP_API_KEY,
            securityJsCode: "8215d7d759a5b8c28827e3f89a65d2a4",
            ...initCommonMapOption,
          });
          const googleMap = await init({
            container: document.getElementById("google-map"),
            mapProvider: "google",
            apiKey: YOUR_GOOGLE_MAP_API_KEY,
            ...initCommonMapOption,
          });

          const geocodeOptions = {
            address: "北京大学",
            bounds: {
              northeast: { lng: 116.417901, lat: 39.943797 },
              southwest: { lng: 116.356449, lat: 39.859008},
            }
          };
          const reverseGeocodeOptions = {
            location: { lat: 39.903179, lng: 116.397755 },
          };
          setTimeout(async () => {
            console.log("正地理编码");
            huaweiMap.geocode(geocodeOptions).then((res) => {
              console.log("huawei", res);
            });
            amapMap.geocode(geocodeOptions).then((res) => {
              console.log("amap", res);
            });
            googleMap.geocode(geocodeOptions).then((res) => {
              console.log("google", res);
            });

            setTimeout(async () => {
              console.log("逆地理编码");
              huaweiMap.reverseGeocode(reverseGeocodeOptions).then((res) => {
                console.log("huawei", res);
              });
              amapMap.reverseGeocode(reverseGeocodeOptions).then((res) => {
                console.log("amap", res);
              });
              googleMap.reverseGeocode(reverseGeocodeOptions).then((res) => {
                console.log("google", res);
              });
            }, 2000);
          }, 2000);
        } catch (error) {
          console.error("Map initialization failed:", error);
        }
      })();
    </script>
  </body>
</html>
